(function () {
  $(function () {
    //jQuery中的ready事件，等待所有DOM加载完成后才执行其中的代码
    // 音乐文件数据mock
    var data = [
      {
        name: "我爱你",
        path: "./music/走着走着就散了.mp3",
        songText: "./lrc/走着走着就散了.lrc",
      },
      {
        name: "我们",
        path: "./music/我们.mp3",
        songText: "./lrc/演员.lrc",
      },
      {
        name: "马叫",
        path: "./music/horse.mp3",
        songText: "",
      },
      {
        name: "避愁",
        path: "./music/避愁.mp3",
        songText: "",
      },
      {
        name: "平凡之路",
        path: "./music/平凡之路.mp3",
        songText: "./lrc/平凡之路.lrc",
      },
      {
        name: "游山恋",
        path: "./music/游山恋.mp3",
        songText: "",
      },
      {
        name: "乌兰巴托的夜",
        path: "./music/乌兰巴托的夜.mp3",
        songText: "",
      },
      {
        name: "循迹 ",
        path: "./music/循迹 .mp3",
        songText: "",
      },
      {
        name: "多幸运",
        path: "./music/多幸运.mp3",
        songText: "",
      },
      {
        name: "平凡之路",
        path: "./music/平凡之路.mp3",
        songText: "",
      },
    ];

    //初始化变量
    var player = document.getElementById("player"),
      //播放器/audio使用play()和pause()方法时必须用JS原生获取DOM，不能用jQ获取

      allTime = null, //音乐总时长
      timer = null, //计时器
      singlePlay = false, //是否单曲循环
      randomPlay = false, //false：顺序播放  true：随机播放
      vol = 20, //音量
      index = 0, //默认播放的音乐的下标
      musicTextTimer = null; //歌词计时器

    // 初始化处理
    function init() {
      // 将歌曲添加到页面中
      $.each(data, function (idx, song) {
        //  console.log(song);
        $(".music").append("<li>" + song.name + "</li>");
      });

      // 设置默认播放的音乐
      $(".music li").eq(index).addClass("on"); //设置选中后的样式
      player.setAttribute("src", data[index].path); //设置播放器/audio的播放路径

      // 初始化初始歌曲的歌词
      getTextInfo(data[index].songText);

      // 初始化音量
      setVol(100);

      // 初始化总时长
      player.addEventListener("loadedmetadata", function () {
        // 加载完成后
        allTime = parseInt(player.duration);
        var m = parseInt(parseInt(player.duration) / 60);
        var s = parseInt(player.duration) - m * 60;
        var time = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
        $(".allTime").html(time);
      });
    }
    init();

    // 播放/暂停
    $(".controls .btn").click(function () {
      if ($(this).hasClass("play")) {
        //如果处于播放状态，将其设置为暂停状态
        $(this).removeClass("play");
        player.pause();
        //播放器/audio使用play()和pause()方法时必须用JS原生获取DOM，不能用jQ获取
      } else {
        $(this).addClass("play");
        player.play();
      }
    });

    // 歌曲列表点击切换
    $(".music li").click(function () {
      index = $(this).index(); //获取当前点击歌名的下标
      // console.log(nowIndex);
      playing(index);
    });

    // 播放歌曲列表中选中的歌曲
    function playing(idx) {
      var lis = $(".music li"); //获取整个播放列表中的歌曲
      lis.removeClass("on"); //移除歌曲列表中所有的li标签被激活的样式
      lis.eq(idx).addClass("on"); //给当前单击选中的歌曲添加样式

      player.src = data[idx].path; //添加播放路径
      $(".controls .btn").removeClass("play"); //更改播放/暂停图标
      setTimeout(() => {
        $(".controls .btn").addClass("play");
        player.play();
        getTextInfo(data[idx].songText);
      }, 200); //设置在切换歌曲时 暂停/播放 之间切换存在一个动画延迟效果
    }

    // 上一曲
    $(".controls .prev").click(function () {
      if (singlePlay) {
        // 判断是否单曲循环
        index = index;
      } else if (randomPlay) {
        // 判断是否随机播放  true：随机播放 false：顺序播放
        index = Math.ceil(Math.random() * data.length);
      } else {
        // index-- 或
        index - 1 < 0 ? (index = data.length - 1) : index--;
      }
      playing(index);
    });
    // 下一曲
    $(".controls .next").click(function () {
      // 判断是否单曲循环
      if (singlePlay) {
        index = index;
      } else if (randomPlay) {
        // 判断是否随机播放  true：随机播放 false：顺序播放
        index = Math.ceil(Math.random() * data.length);
      } else {
        // index++ 或
        index + 1 > data.length - 1 ? (index = 0) : index++;
      }
      playing(index);
    });

    // 歌词显示处理
    function getTextInfo(url) {
      console.log(url);
      if (url == "") {
        //当歌词路径为空时
        setMusicText();
        $(".singWord").html("小凡别着急，正在挥泪加载中！");
        return;
      } else {
        // 歌词切割处理
        var txtArray = [];
        $.get(url).then(function (data) {
          // console.log(data);
          var reg = /\[(\d{2}):(\d{2}).(\d{2})\].*/g;
          var songTxt = data.match(reg);
          // console.log(songTxt);
          for (var i = 0; i < songTxt.length; i++) {
            var singleTxt = songTxt[i].substr(1).split("]");
            // console.log(singleTxt);
            var timeStr = singleTxt[0];
            var m = timeStr[0] == 0 ? timeStr[1] : timeStr.substr(0, 2);
            var s = timeStr[3] == 0 ? timeStr[4] : timeStr.substr(3, 2);
            var hs = timeStr[6] == 0 ? timeStr[7] : timeStr.substr(6, 2);
            // console.log(m, s, hs);
            var wordTime =
              parseInt(m * 60) + parseInt(s) + parseFloat(hs / 1000);
            txtArray.push({
              time: wordTime, //歌词时间
              text: singleTxt[1], //歌词内容
            });
          }
          // console.log(txtArray); //存储切割结果 数组里面嵌套对象，存储时间和歌词
          // 调用设置歌词函数
          setMusicText(txtArray);
        });
      }
    }

    function setMusicText(arr) {
      clearInterval(musicTextTimer); //回收内存
      $(".singWord").html("热爱歌词，热爱音乐！");
      musicTextTimer = setInterval(() => {
        $.each(arr, function (i, v) {
          var currentTime = v.time - player.currentTime;
          // player.currentTime 当前音乐播放的时间
          if (currentTime < 0) {
            //当歌曲向后面继续进行时，歌词也随之切换
            $(".singWord").html(v.text);
          }
        });
      }, 100);
    }

    // 音量重构
    function setVol(vol) {
      if (vol == 0) {
        player.volume = 0;
        $("#volLine i").height(0);
        $(".vol b").html("0%");
      } else {
        player.volume = vol / 100;
        $("#volLine i").height(vol);
        $(".vol b").html(vol + "%");
      }
    }

    // 设置静音
    $(".vol em").click(function () {
      // 如果处于静音状态则取消静音恢复原来音量
      if ($(".vol em").hasClass("on")) {
        $(".vol em").removeClass("on");
        // vol全局变量
        setVol(vol);
      } else {
        // 没处于静音状态则设置静音状态的图标 然后设置声音为0
        $(".vol em").addClass("on");
        setVol(0);
      }
    });

    // 点击音量条调整音量
    $("#volLine").click(function (e) {
      // vol = 音量高度 - (鼠标点击位置距离顶部的距离 - 音量调距离顶部的距离)
      vol = parseInt(
        $("#volLine").height() -
          (getMousePosition(e).top - $("#volLine").offset().top)
      );
      // 设置音量
      setVol(vol);
    });

    // 获取鼠标在页面点击的位置
    function getMousePosition(e) {
      var e = e || window.event;
      // 获取滚动条隐藏的部分
      var scrollX =
        document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollY =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 屏幕宽/高+滚动条隐藏宽/高  即 鼠标的位置(带滚动条内)
      var x = e.pageX || e.clientX + scrollX;
      var y = e.pageY || e.clientXY + scrollY;

      return { left: x, top: y };
    }

    // 单曲循环
    $(".loopSingle").click(function () {
      // 单击单曲循环时清除随机播放/循环播放
      $(".randomAll").removeClass("on");
      $(".randomAll").html("顺序播放");
      randomPlay = false;
      if ($(this).hasClass("on")) {
        $(this).removeClass("on");
        singlePlay = false;
      } else {
        $(this).addClass("on");
        singlePlay = true;
      }
    });
    // 随机播放/循环播放(默认)
    $(".randomAll").click(function () {
      //随机播放/循环播放(默认) 时清除单曲循环
      $(".loopSingle").removeClass("on");
      singlePlay = false;
      if ($(this).hasClass("on")) {
        //当为随机播放时点击变为顺序播放
        $(this).removeClass("on");
        $(this).html("顺序播放");
        randomPlay = false;
      } else {
        $(this).addClass("on"); //当为顺序播放时点击变为随机播放
        randomPlay = true;
        $(this).html("随机播放");
      }
    });

    // 获取当前时长
    player.addEventListener("playing", function () {
      // 获取当前时长
      timer = setInterval(function () {
        setCurTime(player.currentTime);
      }, 1000);
    });

    // 播放结束时
    player.addEventListener("ended", function () {
      clearInterval(timer);
      $(".controls .btn").removeClass("play");
      // 进度条显示100%；
      $(".progress p").width($(".progress").width());
      time = null;
      // 播放下一首
      if (singlePlay) {
        index = index;
      } else if (randomPlay) {
        // 判断是否随机播放  true：随机播放 false：顺序播放
        index = Math.ceil(Math.random() * data.length);
      } else {
        // index++ 或
        index + 1 > data.length - 1 ? (index = 0) : index++;
      }
      playing(index);
    });

    //  设置当前时间 【代码重构，传入当前index】
    function setCurTime(nowTime, sking) {
      // sking 参数用来表明是否是跳跃修改
      if (sking) {
        // 判断是否是跳跃修改
        //  修改当前播放时间 【chrome不支持修改】
        player.currentTime = nowTime;
      }
      // 获取当前时间
      var curTime = parseInt(player.currentTime);
      var m = parseInt(parseInt(player.currentTime) / 60);
      var s = parseInt(player.currentTime) - m * 60;
      var time = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
      $(".curTime").html(time);
      // 进度条显示
      var meter = (curTime / allTime) * $(".progress").width();
      // 长度判断
      meter = meter < $(".progress").width() ? meter : $(".progress").width();
      $(".progress p").width(meter);
    }

    // 进度条点击跳转 【chrome不支持】
    $(".progress").click(function () {
      // 鼠标在进度条点击位置的相对位置
      var long = getMousePosition().left - $(".progress").offset().left;
      $(".progress .p").width(long);
      //  求出对应的当前时间
      var nowTime = (long / $(".progress").width()) * allTime;
      // 设置当前时间
      clearInterval(timer);
      setCurTime(nowTime, true);
    });
  });
})();
